<template>
	<view class="pop-province-city-area" data-type="省市区选择1">
		<u-popup ref="popup_province_city_area" :safeAreaInsetBottom="true" bgColor="#ffffff" :show="show_pop" mode="bottom"
			:closeOnClickOverlay="true" round="30" @close="onclose" @open="onopen">
			<view class="pop-ctx">
				<view class="modal-box">
					<view class="modal-head">
						选择城市
					</view>
					<view class="modal-ctx">
						<picker-view class="cc_area_pick_view" indicator-style="height: 35px;" @change="changeArea"
							:value="select_value">
							<picker-view-column>
								<view v-for="(item, index) in prov_list" :key="index" class="cc_area_colum_view">{{item.name}}</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item, index) in city_list" :key="index" class="cc_area_colum_view">{{item.name}}</view>
							</picker-view-column>
							<picker-view-column>
								<view v-for="(item, index) in area_list" :key="index" class="cc_area_colum_view">{{item.name}}</view>
							</picker-view-column>
						</picker-view>
					</view>
					<view class="modal-foot">
						<view class="btn flex-center" @click="doConfirm()">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			// initValue: {
			// 	type: [String],
			// 	default: ''
			// }
		},
		data() {
			return {
				show_pop: false,
				select_value: [],
				//
				prov_select: {},
				city_select: {},
				area_select: {},
				//
				prov_list: [],
				city_list: [],
				area_list: [],
			}
		},
		watch: {

		},
		created() {
			this.query_area()
		},
		methods: {
			init(info) {
				if (info) {
					let {
						provinceCode,
						cityCode,
						areaCode
					} = info
					if (!this.select_value.length && areaCode) {
						let prov_index = this.prov_list.findIndex(v => v.id == provinceCode) || 0;
						this.prov_select = this.prov_list[prov_index] || {};
						this.city_list = this.prov_select.child || [];
						let city_index = this.city_list.findIndex(v => v.id == cityCode) || 0;
						this.city_select = this.city_list[city_index] || {}
						this.area_list = this.city_select.child || [];
						let area_index = this.area_list.findIndex(v => v.id == areaCode) || 0;
						this.area_select = this.area_list[area_index] || {}
						//
						this.select_value = [prov_index, city_index, area_index]
						
						this.$log('回显省市区', this.select_value)
					}
				}
				this.show_pop = true;
			},
			onclose() {
				this.show_pop = false;
			},
			onopen() {},

			doConfirm() {
				if (!this.area_select.id) {
					this.$alert('请选择省市区')
					return
				}

				this.$emit('confirm', {
					prov: this.prov_select,
					city: this.city_select,
					area: this.area_select,
				})

				this.show_pop = false;
			},

			changeArea(e) {
				this.$log('e监听变化', e)
				let value = e.detail.value
				// this.select_value = ;
				// this.$log('select_value', this.select_value)
				// let deep = this.select_value.length;
				if (this.select_value[0] != value[0]) {
					this.prov_select = this.prov_list[value[0]]
					this.query_area({
						deep: 1,
						parentId: this.prov_select.id
					});
				} else if (this.select_value[1] != value[1]) {
					this.city_select = this.city_list[value[1]]
					this.query_area({
						deep: 2,
						parentId: this.city_select.id
					});
				} else if (this.select_value[2] != value[2]) {
					this.area_select = this.area_list[value[2]]
				}

				this.select_value = value;

				this.set_prov_city_area()
			},

			set_prov_city_area() {
				this.prov_select = this.prov_list[this.select_value[0] || 0] || {}
				this.city_select = this.city_list[this.select_value[1] || 0] || {}
				this.area_select = this.area_list[this.select_value[2] || 0] || {}
			},

			query_area(option = {}) {
				let {
					deep = 0, parentId = 0
				} = option

				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'index_getArea',
						parentId: parentId || 0
					},
				}).then(res => {
					let data = res.data;
					if (deep == 0) {
						this.prov_list = data;
						this.city_list = this.prov_list[0].child
						this.area_list = this.city_list[0].child

						this.set_prov_city_area()
					} else if (deep == 1) {
						this.city_list = data;
						this.area_list = this.city_list[0].child
						this.set_prov_city_area()
					} else if (deep == 2) {
						this.area_list = data
						this.set_prov_city_area()
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pop-product-choose-guige {
		position: relative;
		z-index: 1000;
	}


	.pop-ctx {
		width: 660rpx;
		width: 100%;
		position: relative;
		text-align: left;
		padding-bottom: 0;

		.modal-box {
			border-radius: 16rpx;
			overflow: hidden;
			width: 100%;
			padding: 0 0;
			padding-bottom: 20rpx;
			min-height: 600rpx;
			background: #FFFFFF;
		}
	}



	.modal-head {
		padding: 40rpx 20rpx;
		position: relative;

		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		text-align: center;
	}


	.modal-ctx {
		width: 100%;
		background-color: #fff;
		padding: 20rpx 30rpx;
	}

	.modal-foot {
		margin-top: 30rpx;
		padding: 0 20rpx;

		.btn {
			height: 100rpx;
			height: 80rpx;
			background: #6E9B1A;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

	}




	// 自定义地址选择
	// 自定义地址选择
	// 自定义地址选择
	// 自定义地址选择
	// 自定义地址选择
	.cc_area_view {
		padding-top: 56rpx;
		height: 730rpx;
		width: 100%;
		position: fixed;
		bottom: -1000px;
		left: 0px;
		background-color: #fff;
		z-index: 21;
		transition: all 0.3s;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.cc_area_pick_view {
		height: 200px;
		height: 280px;
		width: 100%;
		// border: 1rpx solid #000000;

	}

	.cc_area_colum_view {
		line-height: 35px;
		text-align: center;
		font-size: 28upx;
	}

	.hide {
		bottom: -1000upx;
		transition: all 0.3s;
	}

	.show {
		bottom: 0upx;
		transition: all 0.3s;
	}

	.cc_area_view_btns {
		// background-color: #fff;
		// border-bottom: 1px solid #eeeeee;
		font-size: 30upx;
		padding: 18upx 0upx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.cc_area_view_btns>text {
		display: inline-block;
		word-spacing: 4upx;
		letter-spacing: 4upx;
	}

	.cc_area_view_btn_cancle {
		color: #939393;
		padding-right: 20upx;
		padding-left: 25upx;
	}

	.cc_area_view_btn_sure {
		float: right;
		padding-left: 20upx;
		padding-right: 25upx;
	}

	.cc_area_mask {
		width: 100%;
		height: 100vh;
		background-color: rgba(28, 28, 28, 0.6);
		position: absolute;
		top: 0upx;
		left: 0upx;
		z-index: 20;
	}

	.bottom {
		position: absolute;
		bottom: 0;
		z-index: 99;
		width: 750rpx;
		height: 164rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 20rpx 2rpx rgba(0, 0, 0, 0.06);
		padding-top: 8rpx;

		.bottom_btn {
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(132deg, #63E188 0%, #A6E85B 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>